<template>
  <PageContainer>
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card>
          <a-statistic title="总订单数量" :value="totalOrderCount">
            <template #prefix>
              <EyeOutlined/>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="销售订单总数" :value="totalOrderCount">
            <template #prefix>
              <UserOutlined/>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="发货订单总数" :value="totalOrderCount">
            <template #prefix>
              <ShoppingCartOutlined/>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="销售总额" :value="totalOrderCount">
            <template #prefix>
              <ShoppingCartOutlined/>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
    <a-card title="今日订单" style="margin-top: 20px">
      <a-table
          :data-source="tableData"
          :pagination="pagination"
          :loading="loading"
          :columns="todayColumns"
      >
        <template #bodyCell="{ column, record }">

          <template v-if="column.key === 'action'">
            <a-space direction="vertical">
              <a-button
                  type="link"
                  @click="showDetailModal(record.id)"
              >
                详情
              </a-button>

              <a-button
                  type="link"
                  @click="showEditModal(record.id)"
              >
                修改
              </a-button>
              <a-button
                  type="link"
                  @click="deleteConfirm(record.id)"
              >
                删除
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>


    </a-card>
  </PageContainer>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {PageContainer} from '@ant-design-vue/pro-layout';
import {EyeOutlined, ShoppingCartOutlined, UserOutlined} from '@ant-design/icons-vue';
import usePage from '@/composables/crud/usePage';
import useDeleteConfirm from '@/composables/crud/useDeleteConfirm';
import useDetailModal from '@/composables/crud/useDetailModal';
import useEditModal from '@/composables/crud/useEditModal';

const totalOrderCount = ref(0);


const fetchStatistics = async () => {
  totalOrderCount.value = 0;
};

const todayColumns = [
  {
    title: '操作',
    key: 'action',
  },
  {title: '批次号', dataIndex: 'batchNumber', key: 'batchNumber'},
  {title: '订单编号', dataIndex: 'id', key: 'id'},
  {title: '创建日期', dataIndex: 'createTime', key: 'createTime'},
  {title: '金额', dataIndex: 'amount', key: 'amount'},
];

const {tableData, pagination, loading, search} = usePage('order/tOrder');

onMounted(() => {
  fetchStatistics();
});

const {showDetailModal, detailModalRef} = useDetailModal('order/tOrder');
const {showDetailModal: showPfBondDetailModal, detailModalRef: pfBondDetailModalRef} =
    useDetailModal('elog/pfBond');

const {deleteConfirm} = useDeleteConfirm('order/tOrder', search);
const {editModalRef, showEditModal} = useEditModal();
</script>

<style scoped></style>
